<template>
  <view class="mine-page" :style="{ padding: menuInfo.top + 'px 0rpx 100rpx' }">
    <!-- 背景 -->
    <view class="bg-top"></view>

    <!-- 个人信息区域 -->
    <view class="user-info">
      <view class="info-content">
        <view class="user-avatar">
          <image :src="userInfo.avatar || '/static/images/default-avatar.png'" mode="aspectFill"></image>
        </view>
        <view class="user-detail">
          <view class="user-name">{{ userInfo.nickName || '未登录' }}</view>
          <view class="user-id" v-if="userInfo.studentId">学号：{{ userInfo.studentId }}</view>
          <view class="user-school" v-if="userInfo.schoolName">{{ userInfo.schoolName }}</view>

          <!-- 未登录显示登录按钮 -->
          <view class="login-btn" v-if="!isLogin" @click="toLogin">
            <text>点击登录</text>
            <tn-icon name="right" size="24"></tn-icon>
          </view>
        </view>
      </view>
    </view>

    <!-- 个人数据统计 -->
    <view class="user-stats">
      <view class="stats-item" @click="navigateTo('/pages/user/favorites')">
        <text class="stats-num">{{ userStats.favorites }}</text>
        <text class="stats-label">收藏</text>
      </view>
      <view class="stats-item" @click="navigateTo('/pages/user/following')">
        <text class="stats-num">{{ userStats.following }}</text>
        <text class="stats-label">关注</text>
      </view>
      <view class="stats-item">
        <text class="stats-num">{{ userStats.views }}</text>
        <text class="stats-label">浏览数</text>
      </view>
      <view class="stats-item" @click="navigateTo('/pages/user/fans')">
        <text class="stats-num">{{ userStats.fans }}</text>
        <text class="stats-label">粉丝</text>
      </view>
      <view class="stats-item" @click="navigateTo('/pages/user/posts')">
        <text class="stats-num">{{ userStats.posts }}</text>
        <text class="stats-label">发布</text>
      </view>
    </view>

    <!-- 常用功能菜单 -->
    <view class="menu-card">
      <view class="menu-title">常用功能</view>
      <view class="menu-grid">
        <view v-for="(item, index) in commonMenu" :key="index" class="menu-item" @click="navigateTo(item.path)">
          <view :class="['menu-icon', item.iconClass]">
            <tn-icon :name="item.icon" size="50" color="#ffffff"></tn-icon>
          </view>
          <text class="menu-name">{{ item.name }}</text>
        </view>
      </view>
    </view>

    <!-- 消息中心 -->
    <view class="menu-card">
      <view class="menu-row" @click="navigateTo('/pages/message/index')">
        <view class="row-left">
          <view class="row-icon msg-icon">
            <tn-icon name="reply" size="40" color="#ffffff"></tn-icon>
          </view>
          <text class="row-title">消息中心</text>
        </view>
        <view class="row-right">
          <view class="badge" v-if="messageCount > 0">{{ messageCount > 99 ? '99+' : messageCount }}</view>
          <tn-icon name="right" size="35" color="#999"></tn-icon>
        </view>
      </view>
    </view>

    <!-- 杂项功能菜单 -->
    <view class="menu-card">
      <view v-for="(item, index) in miscMenu" :key="index" class="menu-row" @click="handleMiscMenuClick(item)">
        <view class="row-left">
          <view :class="['row-icon', item.iconClass]">
            <tn-icon :name="item.icon" size="40" color="#ffffff"></tn-icon>
          </view>
          <text class="row-title">{{ item.name }}</text>
        </view>
        <view class="row-right">
          <tn-icon name="right" size="35" color="#999"></tn-icon>
        </view>
      </view>
    </view>

    <!-- 版本信息 -->
    <view class="version-info">
      <text>星遇 v1.0.0</text>
    </view>

    <!-- 底部自定义TabBar -->
    <tab-bar></tab-bar>
  </view>
</template>

<script setup>
import { ref, onMounted, onActivated } from 'vue';
import NavBar from '@/components/navbar/NavBar.vue';
import TabBar from '@/components/tabbar/TabBar.vue';
import { onShow } from '@dcloudio/uni-app';

onMounted(() => {
  // 获取微信小程序右上角胶囊按钮信息
  getMenuInfo();
  // 检查登录状态
  checkLoginStatus();

  // 获取未读消息数
  // 实际项目中应该是调用API
});

onActivated(() => {
  // 当页面重新激活时，触发通知更新TabBar
  uni.$emit('updateTabBar');
});

// 微信小程序右上角胶囊按钮信息
const menuInfo = ref({
  top: 0,
  bottom: 0,
  left: 0,
  right: 0,
  width: 0,
  height: 0
});

const getMenuInfo = () => {
  try {
    // 检查是否在微信小程序环境
    if (typeof wx !== 'undefined' && wx.getMenuButtonBoundingClientRect) {
      const rect = wx.getMenuButtonBoundingClientRect();
      if (rect) {
        menuInfo.value = rect;
        // console.log('menuinfo', menuInfo.value);
      }
    }
  } catch (error) {
    console.warn('获取胶囊按钮信息失败:', error);
    // 使用默认值，避免报错
    menuInfo.value = {
      top: 44, // 默认状态栏高度
      bottom: 88,
      left: 0,
      right: 0,
      width: 87,
      height: 32
    };
  }
};

// 登录状态
const isLogin = ref(false);

// 用户信息
const userInfo = ref({
  avatar: 'https://picsum.photos/id/1005/200/200',
  nickName: '星遇用户',
  studentId: '2023110789',
  schoolName: '示例大学'
});

// 用户数据统计
const userStats = ref({
  favorites: 26,
  following: 38,
  views: 156,
  fans: 12,
  posts: 9
});

// 常用功能菜单
const commonMenu = [
  {
    icon: 'buy-fill',
    name: '我的交易',
    path: '/pages/user/trades',
    iconClass: 'idle-icon'
  },
  {
    icon: 'sword-fill',
    name: '我的赏金',
    path: '/pages/user/rewards',
    iconClass: 'reward-icon'
  },
  {
    icon: 'job',
    name: '我的兼职',
    path: 'none',
    iconClass: 'job-icon'
  },
  {
    icon: 'bed',
    name: '我的租房',
    path: 'none',
    iconClass: 'house-icon'
  },
  {
    icon: 'flag',
    name: '我的活动',
    path: 'none',
    iconClass: 'activity-icon'
  }
];

// 消息中心消息数量
const messageCount = ref(12);

// 杂项功能菜单
const miscMenu = [
  {
    icon: 'map',
    name: '地址管理',
    path: '/pages/user/address',
    iconClass: 'address-icon'
  },
  {
    icon: 'help',
    name: '问题反馈',
    path: '/pages/user/feedback',
    iconClass: 'feedback-icon'
  },
  {
    icon: 'qr-code',
    name: '扫码进群',
    path: 'scanQRCode',
    iconClass: 'qrcode-icon'
  }
];

// 页面导航
const navigateTo = (url) => {
  if (url === 'none') {
    uni.showToast({
      title: '待开发',
      icon: 'none'
    });
    return;
  }
  uni.navigateTo({
    url
  });
};

// 检查登录状态
const checkLoginStatus = () => {
  const token = uni.getStorageSync('token');
  isLogin.value = !!token;

  // 如果已登录，获取用户信息
  if (isLogin.value) {
    // 这里应该是调用API获取用户信息
    // 暂时使用模拟数据
    userInfo.value = {
      avatar: 'https://picsum.photos/id/1005/200/200',
      nickName: '星遇用户',
      studentId: '2023110789',
      schoolName: '示例大学'
    };
  } else {
    // 未登录状态
    userInfo.value = {
      avatar: '',
      nickName: '',
      studentId: '',
      schoolName: ''
    };
  }
};

// 处理杂项菜单点击
const handleMiscMenuClick = (item) => {
  if (item.path === 'scanQRCode') {
    // 调用扫码API
    uni.scanCode({
      success: (res) => {
        console.log('扫码结果：', res);
        // 处理扫码结果
      }
    });
  } else {
    navigateTo(item.path);
  }
};

// 去登录页
const toLogin = () => {
  uni.navigateTo({
    url: '/pages/login/login'
  });
};
</script>

<style lang="scss" scoped>
$primary-color: $uni-color-primary;

.mine-page {
  min-height: 100vh;
  background-color: #f8f8f8;
  position: relative;
}

.bg-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 700rpx;
  background: 
    /* 基础渐变层 */ linear-gradient(135deg, #a3d2e6 0%, rgba(#a3d2e6, 0.8) 40%, rgba(#fff3c2, 0.6) 60%, rgba(#fff3c2, 0.3) 80%, rgba(#fff3c2, 0) 100%),
    /* 波浪层1 - 左侧 */ radial-gradient(ellipse at 20% 70%, rgba(#fff3c2, 0.5) 0%, rgba(#fff3c2, 0) 60%),
    /* 波浪层2 - 右侧 */ radial-gradient(circle at 80% 40%, rgba(#a3d2e6, 0.6) 0%, rgba(#a3d2e6, 0) 50%),
    /* 波浪层3 - 中下部 */ radial-gradient(ellipse at 50% 90%, rgba(#ffeedb, 0.4) 0%, rgba(#ffeedb, 0) 70%);
  z-index: 0;
  /* 像素风格边缘 */
  mask-image: linear-gradient(to bottom, #000 0%, #000 75%, transparent 100%);
  mask-size: 100% 100%, 100% 16px;
  mask-position: 0 0, 0 bottom;
  mask-repeat: no-repeat;
}

.user-info {
  position: relative;
  padding: 0rpx 30rpx 30rpx;
  z-index: 1;
  color: #ffffff;
  display: flex;
  justify-content: space-between;
  // background-color: pink;

  .info-content {
    display: flex;
    align-items: center;

    .user-avatar {
      width: 140rpx;
      height: 140rpx;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 20rpx;
      border: 4rpx solid #ffffff;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .user-detail {
      .user-name {
        font-size: 36rpx;
        font-weight: bold;
        margin-bottom: 8rpx;
      }

      .user-id,
      .user-school {
        font-size: 26rpx;
        margin-bottom: 4rpx;
        opacity: 0.9;
      }

      .login-btn {
        display: flex;
        align-items: center;
        font-size: 28rpx;
        color: #ffffff;
        opacity: 0.9;
        margin-top: 10rpx;

        tn-icon {
          margin-left: 6rpx;
        }
      }
    }
  }
}

.user-stats {
  display: flex;
  justify-content: space-around;
  background-color: #ffffff;
  border-radius: 16rpx;
  margin: 0 30rpx;
  padding: 30rpx 0;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
  // transform: translateY(0rpx);
  position: relative;
  z-index: 2;

  .stats-item {
    display: flex;
    flex-direction: column;
    align-items: center;

    .stats-num {
      font-size: 32rpx;
      font-weight: bold;
      color: #2d2d2d;
      margin-bottom: 8rpx;
    }

    .stats-label {
      font-size: 26rpx;
      color: #666;
    }
  }
}

.menu-card {
  position: relative;
  background-color: #ffffff;
  border-radius: 16rpx;
  margin: 20rpx 30rpx 0;
  padding: 30rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
  z-index: 1;

  .menu-title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 30rpx;
  }

  .menu-grid {
    display: flex;
    flex-wrap: wrap;

    .menu-item {
      width: 20%;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 20rpx;

      .menu-icon {
        width: 80rpx;
        height: 80rpx;
        border-radius: 16rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 12rpx;
        background-color: #a3d2e6;
        box-shadow: 0 2rpx 8rpx rgba(163, 210, 230, 0.18);

        &.idle-icon {
          background-color: $primary-color;
        }

        &.reward-icon {
          background-color: $primary-color;
        }

        &.job-icon {
          background-color: $primary-color;
        }

        &.house-icon {
          background-color: $primary-color;
        }

        &.activity-icon {
          background-color: $primary-color;
        }
      }

      .menu-name {
        font-size: 24rpx;
        color: #333;
      }
    }
  }

  .menu-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 0;
    border-bottom: 1px solid #f5f5f5;

    &:last-child {
      border-bottom: none;
    }

    .row-left {
      display: flex;
      align-items: center;

      .row-icon {
        width: 60rpx;
        height: 60rpx;
        border-radius: 12rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 20rpx;
        background-color: #f8f9fc;
        box-shadow: 0 2rpx 8rpx rgba(212, 205, 195, 0.12);

        &.msg-icon {
          background-color: $primary-color;
        }

        &.address-icon {
          background-color: $primary-color;
        }

        &.feedback-icon {
          background-color: $primary-color;
        }

        &.qrcode-icon {
          background-color: $primary-color;
        }
      }

      .row-title {
        font-size: 28rpx;
        color: #333;
      }
    }

    .row-right {
      display: flex;
      align-items: center;

      .badge {
        background-color: #ff5252;
        color: #ffffff;
        font-size: 22rpx;
        border-radius: 20rpx;
        padding: 2rpx 10rpx;
        min-width: 32rpx;
        text-align: center;
        margin-right: 12rpx;
      }
    }
  }
}

.version-info {
  text-align: center;
  font-size: 24rpx;
  color: #999;
  padding: 40rpx 0 80rpx;
}
</style>
